import React from "react";
import { Input } from "antd";
import { useFormField } from "../../context/form-context";
const { TextArea } = Input;

let defaultConfig = {
  //这一批属性来源 tplData.form.data_control （步骤权限）
  // "code": "a2",
  // "name": "多行文本",
  // "type": "multiline_text",
  // "is_show": true,
  // "is_editable": true,
  // "is_required": false,

  //这一批属性来源 tplData.form.form_meta_data （表单设计器）
  // "isUsed": false,
  // "designProps": {
  //   "code": "a2",
  //   "name": "多行文本",
  //   "ui": "wfd_multitext",
  //   "title": "多行文本",
  //   "layout": "control_layout_leftRight",
  //   "defaultValue": "",
  //   "text": "请输入多行文本",
  //   "groupTitle": "",
  //   "byTableGroupTitle": false,
  //   "tipstext": "",
  //   "type": "multiline_text",
  //   "rows": 1,
  //   "title_w": 85
  // },
  
  //这一批属性来源 tplData.form.data_define （业务对象）
  // "show_type": "",
  // "show_type_name": "",
  // "props": {
  //   "max_rows": 3,
  //   "max_length": "500",
  //   "source_type": "fixd_value",
  //   "configs": "",
  //   "default_value": ""
  // },
  // "type_name": "多行文本",

  //来源 tplData.form.defaultValueConf
  // "default": null
}

export default function ({ field, label, rules, showLabel = true, required, showCount = false, maxLength = 10000, cell, labelCol, rowIndex, ...others }) {

  const { input, property, readonly, className,isDisplay } = useFormField({ field, rules });

  if (isDisplay) {
    //返回实际显示文本，多行文本需要转换换行符为br
    function getDataText(str) {
      try {
        if (str != null || str != "") {
          var reg = new RegExp("\n", "g");
          var regSpace = new RegExp(" ", "g");
          str = str.replace(reg, "<br>");
          str = str.replace(regSpace, "&nbsp;");
        }
        return <div dangerouslySetInnerHTML={{ __html: str }}></div>;
      } catch (error) {
        return input.value === undefined ? null:input.value;
      }
    }
    return input.value === undefined ? null : getDataText(input.value);
  }

  const component = (
    <TextArea
      showCount={showCount}
      maxLength={cell?.props?.max_length || maxLength}
      className={className}
      rows={cell?.props?.max_rows || 3}
      style={{resize:'none'}}
      placeholder={cell?.designProps?.text? cell?.designProps?.text:"请输入"}
      {...input}
      disabled={property.disabled}
      {...others}
      {...readonly}
    ></TextArea>
  );

  return component;
}
